<template>
  <div class="register">
    <img src="../../static/img/QQ.png">
    <div class="title">QQ</div>
    <input type="text" v-model="form.username" placeholder="账号">
    <input type="password" v-model="form.password" placeholder="密码">
    <br>
    <van-button color="#1989fa" round class="btn" @click="register()">注册</van-button>

    <div class="foot">
      <p>
        <router-link to="/login">用户登录</router-link>
        <span>|</span>
        <router-link to="/forget_password">忘记密码</router-link>
      </p>
    </div>
  </div>
</template>

<script>
  export default {
    name: "register",
    data() {
      return {
        form: {
          username: '',
          password: '',
        }
      }
    },
    created() {

    },
    methods: {
      register() {
        var vm = this
        this.$axios.post("/user/register", {
          username: vm.form.username,
          password: vm.form.password,
        }).then((res => {
          var result = res.data
          if (result.code == 0) {
            vm.$toast("注册成功!");
            vm.$router.replace({
              path: '/login',
            })
          } else {
            vm.$toast(result.msg);
          }
        })).catch((err) => {
          console.log(err)
        })

      }
    }
  }
</script>

<style scoped lang="less">
  .register {
    width: 100%;
    height: 100%;
    background-color: white;
    text-align: center;

    img {
      width: 50px;
      height: 50px;
      margin-top: 50px;
    }

    .title {
      margin-bottom: 50px;
    }

    input {
      background-color: #f4f5f5;
      margin-top: 20px;
      utline-style: none;
      border: 0px;
      padding: 5px;
      text-align: center;
      height: 30px;
      border-radius: 30px;
      width: 200px;
    }

    .btn {
      margin-top: 20px;
      width: 100px;
    }

    .foot {
      position: fixed;
      margin: auto;
      left: 0;
      right: 0;
      bottom: 20px;

      p {
        a {
          font-size: 14px;
          color: #000000;
        }

        span {
          color: #afb0b0;
        }
      }
    }
  }
</style>
